<template>
  <div>
    <nut-dialog title="提示" content="是否删除这个地址？" :visible="show" @ok="confirm" @cancel="show = false" />
    <div class="wrapper" v-if="componentKey">
      <nut-address-list :show-bottom-button="false" swipe-edition :data="data" :options="dataOptions"
        @click-item="handleSeleckAddress" @del-icon="handleClickDel" @add="add" @edit-icon="handleClickAddress"
        @swipe-del="clickSwipe">
        <template #itemAddr="{ item }">
          <div>
            {{ item.fullAddress }}
            <div v-if="props.setupDefault" mt-10rpx>
              <span my-20rpx @click.stop="useDefault(item)">
                设置为默认
              </span>
            </div>
          </div>
        </template>
        <template #itemInfos="{ item }">
          <div>
            {{ item.addressName }} {{ item.phone }}
            <nut-tag v-if="item.defaultAddress" :custom-color="colors.themeColor" plain>默认</nut-tag>
          </div>
        </template>
      </nut-address-list>
      <div h-150rpx></div>
      <submit title="添加地址" @click="navigateTo" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { setAddressDefault, setAddressId } from '@/api/address';
import submit from '@/components/sheet-btn/index.vue';
import { colors } from '@/constants/injection-key';
import { onPullDownRefresh, onShow } from '@dcloudio/uni-app';
import Address from '@/components/address/instance';
const props = defineProps({
  type: {
    type: String,
    default: 'NORMAL',
  },
  setupDefault: {
    type: Boolean,
    default: false
  },
  way: {
    type: String,
    default: '',
  },
})

const show = ref<boolean>(false)
const current = ref({
  id: 0,
})
const params = ref({
  pageSize: 100,
  pageNumber: 1,
})

const addressInstance = new Address(params.value)
const data = ref([])
const dataOptions = ref(addressInstance.defaultOptions)
const componentKey = ref<any>(true);

// 设置为默认
async function useDefault(val: any) {
  // 查询出当前地址信息
  const current = data.value.find((item: any) => item.id === val.id) || {}
  const submit = { ...current, isDefault: true }
  const res = await setAddressDefault(submit)
  if (res.data.success) {
    uni.showToast({
      title: '设置成功',
      icon: 'none',
    })
    params.value.pageNumber = 1
    init()
  }
}

async function init() {
  uni.stopPullDownRefresh();
  const res = await addressInstance.fetch()
  if (res.data.success)
    data.value = res.data.result
}

// 点击地址
function clickSwipe(e: any, val: any) {
  show.value = true
  current.value = val
}

// 选择地址
async function handleSeleckAddress(event: any, item: any, index: number) {
  await setAddressId(item.id, props.way);
  uni.navigateBack({
    delta: 1,
  });
}

// 确认删除
async function confirm() {
  const res = await addressInstance.delete(current.value.id)
  show.value = false
  if (res.data.success) {
    componentKey.value = false;
    uni.showToast({
      title: '删除成功',
      icon: 'none',
    })
    params.value.pageNumber = 1;
    await init();
    componentKey.value = true;
  }
}
function handleClickAddress(event: Event, current: any) {
  const val = data.value.find((item: any) => {
    return item.id === current.id
  })
  navigateTo(current.id, val)
}

function add() {
  navigateTo()
}

// 删除地址
function handleClickDel(event: Event, val: any) {
  show.value = true
  current.value = val
}

// 跳转到地址详情
function navigateTo(id = '', data?: any) {
  let src = props.type ? `/pages/mine/address/detail?type=${props.type}` : '/pages/mine/address/detail'
  if (id)
    src = `/pages/mine/address/detail?id=${id}&data=${encodeURIComponent(JSON.stringify(data))}`
  uni.navigateTo({
    url: src,
  })
}

onShow(async () => {
  params.value.pageNumber = 1
  params.value.pageSize = 100
  init()
})
onPullDownRefresh(() => {
  params.value.pageNumber = 1
  params.value.pageSize = 100
  init()
})

</script>


<style scoped></style>
